import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Button, Empty, Typography } from 'antd';
import React from 'react';

const Project: React.FC = () => {
  return (
    <PageContainer
      tabBarExtraContent={
        <Button type={'primary'} onClick={() => history.push('./project/create')}>
          添加项目
        </Button>
      }
      fixedHeader
      header={{
        style: { backgroundColor: 'white' },
      }}
      tabList={[
        {
          tab: '已选择',
          key: '1',
        },
        {
          tab: '可点击',
          key: '2',
        },
        {
          tab: '禁用',
          key: '3',
          disabled: true,
        },
      ]}
    >
      <ProCard gutter={[8, 8]} ghost={true} wrap={true}>
        <ProCard
          size={'small'}
          title={'项目一'}
          headerBordered={true}
          colSpan={{ xs: '10%', xl: '30%' }}
          extra={
            <Button
              type={'link'}
              size={'small'}
              onClick={() => history.push(`/devops/project1/overview`)}
            >
              查看
            </Button>
          }
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Empty
            image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            styles={{ image: { height: 60 } }}
            description={
              <Typography.Text>
                未添加应用，前往 <a href="#API">添加应用</a>
              </Typography.Text>
            }
          >
            {/*<Button type="primary" size={"small"}>添加应用</Button>*/}
          </Empty>
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};

export default Project;
